<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <!--<link rel="stylesheet" href="./static/index/css/bootstrap.min.css">-->

    {css href="__CSS__bootstrap.min.css"}
    {css href="__CSS__toastr.min.css"}

    {css href="__INDEX__reset.css"}



    <style type="text/css"></style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-12 bg-primary p20">
            <h1>{$title}</h1>
            <hr>
            <a href="{:url('rest/user/index')}" class="btn btn-default">用户列表</a>
            <a href="{:url('rest/user/create')}" class="btn btn-default">添加用户</a>
        </div>

        <div class="clearfix"></div>

{block name="main"}
        <div class="row mt50">
            <div class="col-md-6">
                <table class="table table-hover bg-info">
                    <tr>
                        <th>ID</th>
                        <th>NAME</th>
                        <th class="col-md-6">ACTION</th>
                    </tr>

                    {volist name="list" key="k" id="v" mod="2"}
                    {eq name="mod" value="0"}
                    <tr>
                        <td>{$v['id']}</td>
                        <td>{$v['name']}</td>
                        <td>
                            <a href="{:url('rest/user/readpage', ['id'=>$v['id']])}" class="btn btn-xs btn-default">查看信息(页)</a>
                            <button data-id="{$v['id']}" class="btn btn-xs btn-default show-btn" data-toggle="modal" data-target="#myModal">查看信息(框)</button>

                            <a href="{:url('rest/user/edit', ['id'=>$v['id']])}" class="btn btn-xs btn-primary">编辑</a>
                            <button data-id="{$v['id']}" class="btn btn-xs btn-danger del-btn">删除</button>

                        </td>
                    </tr>
                    {/eq}
                    {/volist}
                </table>
            </div>
            <div class="col-md-6">
                <table class="table table-hover bg-info">
                    <tr>
                        <th>ID</th>
                        <th>NAME</th>
                        <th class="col-md-6">ACTION</th>
                    </tr>

                    {volist name="list" key="k" id="v" mod="2"}
                    {eq name="mod" value="1"}
                    <tr>
                        <td>{$v['id']}</td>
                        <td>{$v['name']}</td>
                        <td>
                            <a href="{:url('rest/user/readpage', ['id'=>$v['id']])}" class="btn btn-xs btn-default">查看信息(页)</a>
                            <button data-id="{$v['id']}" class="btn btn-xs btn-default show-btn" data-toggle="modal" data-target="#myModal">查看信息(框)</button>
                            <a href="{:url('rest/user/edit', ['id'=>$v['id']])}" class="btn btn-xs btn-primary">编辑</a>
                            <button data-id="{$v['id']}" class="btn btn-xs btn-danger del-btn">删除</button>
                        </td>
                    </tr>
                    {/eq}
                    {/volist}
                </table>
            </div>
        </div>
{/block}
    </div>
</div>




{block name="sub"}
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">
                    用户 [<u></u>] 的信息
                </h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-3">
                        <img src="__INDEX__face/batman.jpg" width="100">
                    </div>
                    <div class="col-md-9">
                        <h3>....</h3>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
{/block}

{js href="__JS__jquery.min.js"}
{js href="__JS__bootstrap.min.js"}
{js href="__JS__toastr.min.js"}

{block name="myjs"}
<script>

    // 设置弹框参数
    toastr.options = {
        closeButton: true,// 是否显示关闭按钮
        progressBar: true,// 实现显示计时条
        timeOut: "3000",  // 自动关闭时间
        positionClass: "toast-bottom-left" // 提示位置
        // toast-top-full-width 顶端，宽度铺满整个屏幕
        // toast-top-right  顶端右边
    };


    $(function(){
        // AJAX 删除
        $('.del-btn').click(function (){
            var ac_id = $(this).attr('data-id');
            console.log('删除,ID: '+ac_id);

            if (confirm('您确定要 [删 除] 吗?')) {
                var trObj = $(this).parents('tr');
                // console.log(trObj);
                delAJAX(ac_id, trObj);
            }
        });
        // AJAX 查询指定信息
        $('.show-btn').click(function (){
            var ac_id = $(this).attr('data-id');
            console.log('查看,ID: '+ac_id);

            showAJAX(ac_id);
        });

    });


    function showAJAX(id) {
        $.ajax({
            type : 'get',
            url : '/users/'+id,
            dataType : 'json',
            success: function (data) {
                console.log(data);

                if (data.status) {
                    $('.modal-title u').html(data.title);
                    var msg = data.datas.id + '/'+ data.datas.name + '/'+ data.datas.tel;
                    console.log(msg);
                    $('.modal-body h3').html(msg);
                } else {
                    $('.modal-title u').html(data.title);
                    $('.modal-body h3').html(data.datas);
                }
            },
            error: function () {
                alert('操作失败!!');
            }
        });
    }

    function delAJAX(id, obj) {
        $.ajax({
            type : 'delete',
            url : '/users/'+id,
            dataType : 'json',
            success: function (data) {
                // console.log(data);

                if (data.status) {
                    toastr.success(data.info);
                    // 删除目标节点
                    obj.remove();
                } else {
                    toastr.error(data.info);
                }
            },
            error: function () {
                alert('操作失败!!');
            }
        });
    }

</script>
{/block}

</body>
</html>